<template>
	<div :id="id" :data="data"></div>
</template>

<script>
	export default {
		data() {
			return {
				ChartLineGraph:null
			}
		},
		watch:{
			data:{
				handler(newValue,odValue){
					this.drawLineGraph(this.id,newValue)
				},
				deep:true
			}
		},
		props: ["id","data"],
		mounted() {
			this.drawLineGraph(this.id,this.data)
		},
		methods: {
			drawLineGraph(id,data){
				let _this = this
				let myCahrt = document.getElementById(id)
				this.ChartLineGraph = this.$echarts.init(myCahrt)
				this.ChartLineGraph.setOption(data)
				window.addEventListener("resize",()=>{
					_this.ChartLineGraph.resize()
				})
			}
		},
		beforeDestroy(){
			if(this.ChartLineGraph){
				this.ChartLineGraph.clear()
			}
		}
	}
</script>

<style>
</style>
